<template>
  <div class="bar">
    <Arrows :title="titles" />
    <ul>
      <li
        v-for="(item, index) in title"
        :key="index"
        @click="changeIndex(index)"
        :class="activeIndex == index ? 'active' : 'lis'"
      >
        {{ item }}
      </li>
    </ul>
    <div id="powerHistogram"></div>

    <div
      ref="divs"
      :id="isBig ? 'divs-xa' : 'divs-xb'"
      :style="{ left: xx + 'px', top: yy + 'px' }"
    >
      <el-card :class="isBig ? 'cards' : 'carda'" v-show="isShow">
        <ul id="div1"   @mousedown="mousedowns" @mousemove="mousemoves">
          <li class="li1">
            <span>当前网省-江苏</span>
          </li>
          <li class="li2">
            <div class="diva">
              <p class="span1"></p>
              <p class="span2">总数</p>
            </div>
            <div class="divb">
              <p class="span3"></p>
              <p class="span4">未恢复</p>
            </div>
          </li>
          <li class="li3">
            <div class="div-a">
              <img
                src="../../../public/image/big.png"
                alt=""
                v-if="isBig"
                @click="bigImg"
              />
              <img
                src="../../../public/image/small.png"
                alt=""
                v-else
                @click="smallImg"
              />
            </div>
            <div class="div-b">
              <img
                src="../../assets/image/hellowword/close.png"
                alt=""
                @click.prevent="closeCard"
              />
            </div>
          </li>
        </ul>
        <div >
          <!-- :empty-text="loading ==true? '':'暂无数据a'"   获取的数据为空 
          
  v-loading="true"    加载条

  element-loading-text="拼命加载中"   加载内容

  element-loading-spinner="el-icon-loading"
  element-loading-background="rgba(0, 0, 0, 0.8)"
          -->
          <el-table
            :data="tableData"
            highlight-current-row
            style="width: 100%; height: 100%; color: white; fontsize: 18px"
            :cell-style="TableCellStyle"
            :header-cell-style="{
              background: '#042357',
              color: 'white',
              fontsize: '18px',
              height: '70px',
              border: 'none',
            }"
          >
            >
            <el-table-column
              prop="nubs"
              label="序号"
              width="180"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="地市"
              width="180"
              align="center"
            >
            </el-table-column>
            <el-table-column label="停电线路(条·次)" align="center">
              <template slot-scope="scope">
                <span style="color: #ffbf45">{{
                  scope.row.deadLine.numbers
                }}</span>
                /
                <span>{{ scope.row.deadLine.total }}</span>
              </template>
            </el-table-column>
            <!-- 整线停电 -->
            <el-table-column label="整线停电(条·次)" align="center">
              <template slot-scope="scope">
                <span style="color: #ffbf45">{{
                  scope.row.allPowerCut.numbers
                }}</span>
                /
                <span>{{ scope.row.allPowerCut.total }}</span>
              </template>
            </el-table-column>
            <!-- 支线停电 -->
            <el-table-column label="支线停电(条·次)" align="center">
              <template slot-scope="scope">
                <span style="color: #ffbf45">{{
                  scope.row.branchPowerCut.numbers
                }}</span>
                /
                <span>{{ scope.row.branchPowerCut.total }}</span>
              </template>
            </el-table-column>
            <!-- 配变停电 -->
            <el-table-column label="配变停电(条·次)" align="center">
              <template slot-scope="scope">
                <span style="color: #ffbf45">{{
                  scope.row.distributionPowerCut.numbers
                }}</span>
                /
                <span>{{ scope.row.distributionPowerCut.total }}</span>
              </template>
            </el-table-column>
            <!-- 单配变停电 -->
            <el-table-column label="单配变停电(条·次)" align="center">
              <template slot-scope="scope">
                <span style="color: #ffbf45">{{
                  scope.row.branchDistributionPowerCut.numbers
                }}</span>
                /
                <span>{{ scope.row.branchDistributionPowerCut.total }}</span>
              </template>
            </el-table-column>
            <!-- 停电用户 -->
            <el-table-column label="停电用户(条·次)" align="center">
              <template slot-scope="scope">
                <span style="color: #ffbf45">{{
                  scope.row.powerCutUser.numbers
                }}</span>
                /
                <span>{{ scope.row.powerCutUser.total }}</span>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            :current-page="pageIndex"
            :page-sizes="[5, 10]"
            :page-size="pageNumbers"
            layout="total,sizes,prev, pager, next, jumper"
            :total="count"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import Arrows from "../arrows/index.vue";
import { pageLists, pageList, searchList } from "../../api/index";
var xyz = [
  [
    {
      offset: 0,
      color: "rgba(0, 217, 221,1)", // 0% 处的颜色
    },
    {
      offset: 1,
      color: "rgba(0, 217, 221,0)", // 100% 处的颜色
    },
  ],
  [
    [
      {
        offset: 0,
        color: "rgba(35, 250, 187, 1)", // 0% 处的颜色
      },
      {
        offset: 1,
        color: "rgba(35, 250, 187, 0)", // 100% 处的颜色
      },
    ],
  ],
  [
    {
      offset: 0,
      color: "rgba(222, 182, 12, 1)", // 0% 处的颜色
    },
    {
      offset: 1,
      color: "rgba(222, 182, 12, 0)", // 100% 处的颜色
    },
  ],
];

export default {
  name: "histogram",
  props: ["titles"],
  components: { Arrows },
  data() {
    return {
      loading: false, //加载表格
      isShow: false,
      tableData: [],
      //   全网停电按钮高亮
      activeIndex: 0,
      myChart: null,
      list: [],
      citys: [],
      isBig: true,
      x: 0,
      y: 0,
      cw: 2784,
      ch: 1080,
      xx: 0,
      yy: 0,
      pageIndex: 1,
      pageNumbers: 10,
      currentPage: 1, //当前页
      totalPage: 0,
      count: 0,
      paramsa: "",
    };
  },

  mounted() {
    // this.getList();
    this.myChart = this.$echarts.init(
      document.getElementById("powerHistogram")
    );

    pageLists({
      params: {
        pageIndex: this.pageIndex,
        pageNumbers: this.pageNumbers,
      },
    }).then(({ data }) => {
      // console.log(data.page);

      let a = data.page.slice(0, 13);
      this.citys = a;
    });
  },
  computed: {
    title() {
      return ["线路", "配变", "用户"].map((r, i) => r);
    },
  },
  watch: {
    citys(a, b) {
      this.myChart.setOption({
        legend: {
          textStyle: {
            fontSize: 16, //字体大小
            color: "#9ccef1", //字体颜色
          },
          silent: true,
          data: [1, 2, 3, 4].map(
            (r, i) => ["整线停电", "整线未恢复", "支线停电", "支线未恢复"][i]
          ),
          right: "10%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            textStyle: {
              color: "#fff",
            },
          },
        },
        grid: {
          borderWidth: 0,
          left: 80,
          bottom: 61,
          textStyle: {
            color: "#fff",
          },
        },
        title: {
          subtext: "条.次",
          subtextStyle: {
            color: "#a3d5f7",
            fontSize: 18,
            fontFamily: "Microsoft YaHei",
          },
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#bfd4ee",
              },
            },
            triggerEvent: true, //点击事件
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#a3d5f7ff",
              fontSize: 18,
            },
            // data: a[this.activeIndex].children.map((r) => r.name),
            data: this.citys.map((r) => r.name),
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#bfd4ee",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#a3d5f7ff",
              fontSize: 18,
            },
            splitArea: {
              show: false,
            },
          },
        ],

        series: [1, 2, 3, 4].map((r, i) => {
          return {
            name: ["整线停电", "整线未恢复", "支线停电", "支线未恢复"][i],
            type: "bar",
            stack: i > 1 ? "总量i" : "总量",
            barMaxWidth: 35,
            barGap: "10%",
            data: [
              709, 1917, 2455, 2610, 1719, 1433, 709, 1917, 2455, 1000, 3000,
              2345, 2456, 4444,
            ],
            barWidth: "20%", //柱状图宽度
            itemStyle: {
              // "#2abcc9", "red", "yellow"

              color: [
                new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
                    // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                    offset: 0,
                    color: "#00eeec",
                  },
                  {
                    offset: 0.9,
                    color: "rgba(0, 238, 236, 0)",
                  },
                ]),
                new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
                    // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                    offset: 0,
                    color: "#ffcc00",
                  },
                  {
                    offset: 0.9,
                    color: "rgba(255, 204, 0, 0) ",
                  },
                ]),
                new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
                    // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                    offset: 0,
                    color: "#1c61ff ",
                  },
                  {
                    offset: 0.9,
                    color: "rgba(0, 238, 236, 0) ",
                  },
                ]),
                new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
                    // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                    offset: 0,
                    color: "#fff400 ",
                  },
                  {
                    offset: 0.9,
                    color: "rgba(0, 238, 236, 0) ",
                  },
                ]),
              ][i],
              borderRadius: 0,
            },
          };
        }),
      });
      this.myChart.on("click", (params) => {
        this.paramsa = params;
        this.xx = 119;
        this.yy = 85;

        this.isShow = true;

        this.cityList(params);
        this.TableCellStyle();
      });
    },
  },
  methods: {
    changeIndex(index) {
      this.activeIndex = index;

      this.myChart.setOption({
        xAxis: {
          data: this.citys.map((r) => r.name),
          splitLine: {
            show: false,
          },
          axisTick: { show: false }, //去掉两端的小线段
        },
      });
    },
    // 关闭卡片
    closeCard() {
      // console.log(1111);
      this.isShow = false;
      this.isBig = true;
    },
    //设置表格背景颜色
    TableCellStyle(row, column, rowIndex, columnIndex) {
      return "background-color:#042357";
    },
    // 放大
    bigImg() {
      this.isBig = false;
      if (!this.isBig) {
        this.xx = 0;
        this.yy = 0;
      }
    },
    // 切换每页数量
    handleSizeChange(e) {
      this.pageNumbers = e;
      this.cityList(this.paramsa);
    },
    // 切换页码
    handleCurrentChange(e) {
      this.pageIndex = e;
      this.cityList(this.paramsa);
    },

    // 缩小
    smallImg() {
      this.isBig = true;
      this.xx = 119;
      this.yy = 85;
    },

    cityList(params) {
      console.log(params);
      searchList(params.name || params.value).then(({ data }) => {
        console.log(data, 888);
        this.count = data[0].children.length;
        let a = data[0].children.map((r, i) => {
          return {
            name: r.name,
            nubs: ++i,
            // 停电线路
            deadLine: {
              total: 5,
              numbers: 1,
            },
            // 整线停电
            allPowerCut: {
              total: 5,
              numbers: 4,
            },
            // 支线停电
            branchPowerCut: {
              total: 0,
              numbers: 0,
            },
            // 配变停电
            distributionPowerCut: {
              total: 50,
              numbers: 10,
            },
            // 单配变停电
            branchDistributionPowerCut: {
              total: 0,
              numbers: 0,
            },
            // 停电用户
            powerCutUser: {
              total: 500,
              numbers: 200,
            },
          };
        });
        // 分页
        this.tableData = a.slice(
          (this.pageIndex - 1) * this.pageNumbers,
          this.pageIndex * this.pageNumbers
        );
      });
    },

    // 鼠标按下
    mousedowns(e) {
      // console.log(e.clientX, e.clientY);
      this.x = e.clientX;
      this.y = e.clientY;
    },
    // 鼠标移动
    mousemoves(e) {
      let xa = e.clientX - this.x;
      let ya = e.clientY - this.y;
      // console.log(xa,ya,2);

      if (xa > 179) {
        xa = 179;
      } else if (xa < 0) {
        xa = 0;
      }
      if (ya > 183) {
        ya = 183;
      } else if (ya < 0) {
        ya = 0;
      }

      // if (xa + this.$refs.divs.offsetWidth > this.cw)
      //   xa = this.cw - this.$refs.divs.offsetWidth;
      // if (ya + this.$refs.divs.offsetHeight > this.ch)
      //   ya = this.ch - this.$refs.divs.offsetHeight;
      // this.$refs.divs.style.width='2000px'
      //  this.$refs.divs.style.top=ya+'px'
      // console.log(xa+'px',ya,1);
      if (this.isBig) {
        this.xx = xa;
        this.yy = ya;
      } else {
        this.xx = 0;
        this.yy = 0;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.active {
  color: yellow;
  width: 90px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  // border: 1px dashed #ccc;

  font-family: Microsoft YaHei;

  font-size: 18px;
  margin-left: 20px;
  text-align: center;
  background: url("../../assets/image/hellowword/MarshallingTwo.png");
  background-size: 100%;
}
.bar {
  margin-top: 20px;
  background: url("../../assets/image/hellowword/BackgroundFour.png") no-repeat;
  background-size: 100%;
  width: 1842px;
  height: 380px;
  padding-top: 20px;

  z-index: 100;
  ul {
    display: flex;
    margin-bottom: 20px;
    .lis {
      width: 90px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      // border: 1px dashed #ccc;

      font-family: Microsoft YaHei;
      color: #a3d5f7;
      font-size: 18px;
      margin-left: 20px;
      text-align: center;
      background: url("../../assets/image/hellowword/MarshallingThree.png");
      background-size: 100%;
    }
  }
  #powerHistogram {
    width: 2010px;
    height: 293px;
    margin-left: 10px;
  }
  #divs-xa {
    position: absolute;
    top: 85px;
    left: 119px;
  }
  #divs-xb {
    position: absolute;
    top: 0px;
    left: 0px;
  }
  .cards {
    z-index: 9999999999999999;
    width: 1700px;
    height: 895px;
    // background-color: rgba(0, 32, 81, 0.8);
    background: #042357;
    // border: 1px dashed red;

    // border-color: rgba(108, 128, 151, 0.5);
    border-radius: 10px;
    box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.5);

    #div1 {
      width: 1660px;
      height: 39px;
      // border: 1px solid red;
      margin-bottom: 20px;

      .li1 {
        width: 335.94px;
        height: 39px;
        background: url("../../assets/image/hellowword/marshallingSeven.png");
        background-size: 100%;
        // border: 1px solid red;
        margin-right: 22.06px;
        span {
          // width: 137px;
          height: 24px;
          text-shadow: 0px 0px 9px #159aff;
          font-family: Microsoft YaHei;
          font-weight: 700;
          color: #ffffff;
          font-size: 18px;
          letter-spacing: 3px;
          line-height: 24px;
          display: inline-block;
          margin: 7px 0 0 53px;
        }
      }
      .li2 {
        // border: 1px solid red;
        margin-right: 1085px;
        display: flex;
        align-items: center;
        .diva {
          margin-right: 30px;
          display: flex;
        }
        .divb {
          display: flex;
        }
        .span1 {
          width: 12px;
          height: 12px;
          background-color: #ffffff;
          margin-right: 10px;
          display: inline-block;
          margin-top: 9px;
        }
        .span3 {
          width: 12px;
          height: 12px;
          background-color: #ffbf45;
          margin-right: 10px;
          margin-top: 9px;
        }
        .span2,
        .span4 {
          width: 36px;
          height: 24px;
          margin-top: 6px;
          font-family: Microsoft YaHei;
          color: #a3d5f7;
          font-size: 18px;
          line-height: 24px;
        }
        .span4 {
          width: 54px;
        }
      }
      .li3 {
        display: flex;
        margin-top: 2px;

        .div-a {
          width: 22px;
          height: 22px;
          background-color: rgba(0, 114, 255, 0.4);
          border: 1px solid;
          border-color: #0072ff;
          margin-right: 10px;
          img {
            width: 16px;
          }
        }
        .div-b {
          // background: url("../../assets/image/hellowword/close.png");
          // background-size: 100%;
          img {
            width: 23px;
            height: 22px;
          }
        }
      }
    }
  }
  .carda {
    z-index: 99999999;
    width: 1920px;
    height: 1080px;
    // background-color: rgba(0, 32, 81, 0.8);
    background: #042357;
    // border: 1px dashed;

    // border-color: rgba(108, 128, 151, 0.5);
    // border-radius: 10px;
    box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.5);
    // position: absolute;
    // top: 0;
    // left: 0;
    #div1 {
      width: 1920px;
      height: 39px;
      // border: 1px solid red;
      margin-bottom: 20px;

      .li1 {
        width: 335.94px;
        height: 39px;
        background: url("../../assets/image/hellowword/marshallingSeven.png");
        background-size: 100%;
        // border: 1px solid red;
        margin-right: 22.06px;
        // margin-left: 30px;
        span {
          // width: 137px;
          height: 24px;
          text-shadow: 0px 0px 9px #159aff;
          font-family: Microsoft YaHei;
          font-weight: 700;
          color: #ffffff;
          font-size: 18px;
          letter-spacing: 3px;
          line-height: 24px;
          display: inline-block;
          margin: 7px 0 0 53px;
        }
      }
      .li2 {
        // border: 1px solid red;
        margin-right: 1085px;
        display: flex;
        align-items: center;
        .diva {
          margin-right: 30px;
          display: flex;
        }
        .divb {
          display: flex;
        }
        .span1 {
          width: 12px;
          height: 12px;
          background-color: #ffffff;
          margin-right: 10px;
          display: inline-block;
          margin-top: 9px;
        }
        .span3 {
          width: 12px;
          height: 12px;
          background-color: #ffbf45;
          margin-right: 10px;
          margin-top: 9px;
        }
        .span2,
        .span4 {
          width: 36px;
          height: 24px;
          margin-top: 6px;
          font-family: Microsoft YaHei;
          color: #a3d5f7;
          font-size: 18px;
          line-height: 24px;
        }
        .span4 {
          width: 54px;
        }
      }
      .li3 {
        display: flex;
        margin-top: 2px;
        margin-left: 215px;
        .div-a {
          width: 22px;
          height: 22px;
          background-color: rgba(0, 114, 255, 0.4);
          border: 1px solid;
          border-color: #0072ff;
          margin-right: 10px;
          img {
            width: 16px;
          }
        }
        .div-b {
          // background: url("../../assets/image/hellowword/close.png");
          // background-size: 100%;
          img {
            width: 23px;
            height: 22px;
          }
        }
      }
    }
  }
}
// ::v-deep .el-table tr {
//   background-color: rgba(0, 32, 81, 0.8);

// }
// ::v-deep .el-table th {
//   background-color: rgba(0, 32, 81, 0.8);
// }
// tr
::v-deep .el-table__row {
  height: 60px;
  margin-bottom: 10px;
}
// td
::v-deep .el-table__cell {
  padding: 0;
}
::v-deep .el-table__row > td {
  border: none;
}
::v-deep .el-table::before {
  height: 0;
}

// 分页
// ::v-deep .el-pagination__total{
// color:white
// }
// ::v-deep .el-pagination__sizes{

//   background: #91c2ff;
// }
// ::v-deep .el-input__inner{
//     background: #91c2ff;
//     border: none;
//       color: white;
// }
// ::v-deep .el-input__suffix{
//     background: #91c2ff;
//       color: white;
// }
::v-deep .el-pagination {
  float: right;
  margin-top: 15px;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background: #018bf9 !important;
}
</style>
